import React from "react";
import {Form, Input, Button, Row, Col} from "antd";
import {UserOutlined, LockOutlined, LoadingOutlined, VerifiedOutlined} from "@ant-design/icons";
import ProBox from 'vendor/components/pro-box';
import { useThemeToken } from "@/constants";
import {useLogin} from './useLogin';

const Login: React.FC = () => {
    const { themeToken } = useThemeToken();
    const {loading, BgImg, submitting, canvasRef, handleSubmit, form, captchaImageInfo, fetchCaptchaImage} = useLogin();

    return <ProBox loading={loading}>
        <div id="backgroundBox" className="login-container">
            <canvas ref={canvasRef}/>
            <div className="content">
                <Form form={form}>
                    <div className="logo">
                        <span style={{fontSize: 25, fontWeight: 500}}>登录</span>
                    </div>
                    <Form.Item
                        name="loginName"
                        rules={[{required: true, whitespace: true, message: '请填写用户名!'}]}
                    >
                        <Input
                            size="large"
                            autoFocus={true}
                            prefix={<UserOutlined/>}
                            placeholder="用户名"
                            onKeyDown={handleSubmit}
                        />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{required: true, whitespace: true, message: '请填写密码!'}]}
                    >
                        <Input
                            size="large"
                            prefix={<LockOutlined/>}
                            type="password"
                            placeholder="密码"
                            onKeyDown={handleSubmit}
                        />
                    </Form.Item>
                    <Form.Item
                        name="code"
                        rules={[{required: true, whitespace: true, message: '请填写验证码!'}]}
                    >
                        <Row gutter={5} align="middle">
                            <Col span={18}>
                                <Input
                                    size="large"
                                    prefix={<VerifiedOutlined />}
                                    placeholder="验证码"
                                    onKeyDown={handleSubmit}
                                />
                            </Col>
                            <Col span={6}>
                                <img src={captchaImageInfo.img}
                                     style={{width: "100%", height: 37, cursor: "pointer"}}
                                     onClick={fetchCaptchaImage}
                                />
                            </Col>
                        </Row>
                    </Form.Item>
                    <Form.Item>
                        <Button
                            size="large"
                            type="primary"
                            style={{width: "100%"}}
                            onClick={handleSubmit}
                            icon={submitting && <LoadingOutlined />}
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>

            {/*language=SCSS*/}
            <style jsx>{`
              .login-container {
                user-select: none;
                height: 100%;
                overflow: hidden;
                position: relative;
                background-image: url(${BgImg});
                background-size: 100% 100%;

                .content {
                  position: absolute;
                  background-color: ${themeToken.colorBgContainer};
                  left: 50%;
                  top: 50%;
                  width: 30%;
                  padding: 30px 30px 0 30px;
                  transform: translate(-50%, -60%);
                  box-shadow: 0 0 10px 2px rgba(40, 138, 204, 0.16);
                  border-radius: 3px;

                  .logo {
                    width: 100%;
                    text-align: center;
                    padding-bottom: 5px;
                  }
                }
              }
            `}</style>
        </div>
    </ProBox>
}

export default Login;

